<template>
  <div class="center">
    <div class="option">
      <div class="title">终端统计展示</div>
      <div class="body option1">
        <div class="op1">
          <div class="table" ref="option1$"></div>
          <div class="txtcenter">
            <div>
              在线率<span style="color: #1198f4">{{ onlineRate }}%</span>
            </div>
            <div>
              离线率<span style="color: #ffa634">{{ offlineRate }}%</span>
            </div>
          </div>
        </div>
        <div class="op1">
          <div class="table" ref="option2$"></div>
          <div class="txtcenter">
            <div>
              在线率<span style="color: #1198f4">{{ onlineCameraRate }}%</span>
            </div>
            <div>
              离线率<span style="color: #ffa634">{{ offlineCameraRate }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="option option2">
      <div class="title">
        设备概况
        <div class="icon"><input type="file" @change="handleFileUpload" /><img src="/images/upload.png" alt="" /></div>
      </div>
      <div class="body jiedao">
        <ul>
          <li @click="emit('select', item.name)" :class="item.name == active ? 'active' : ''" v-for="item in list" :key="item.id">
            <div class="l-left">
              <img src="/images/tab_listele.png" alt="" />
              <span>{{ item.short }}</span>
            </div>
            <div class="l-right">
              <span>{{ item.name }}</span>
              <div>{{ item.num }}台</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <teleport to='body'>
    <div class="toast" v-if="loading">
      上传中...
    </div>
  </teleport>
</template>

<script setup>
import { onMounted, defineProps, ref, watch, nextTick } from "vue";

import * as echarts from "echarts";
import axios from "axios";
import { mapData } from "../data/index";
const emit = defineEmits(["select"]);

const props = defineProps({
  list: Array,
  active: String,
});

const Domain = ''

// const Domain = "http://18666186515.wicp.vip";

let option1$ = ref(null);
let option2$ = ref(null);

let loading = ref(false)

let onlineRate = ref(0);
let offlineRate = ref(0);

let onLineCameraCount = 0;
let offLineCameraCount = 0;

let onlineCameraRate = 0;
let offlineCameraRate = 0;

let handleFileUpload = async (event) => {
  let file = event.target.files[0];

  if (file) {
    const formData = new FormData();
    formData.append("file", file);
    loading.value = true
    await axios.post(Domain + "/gy/att-camera-device-list/import", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      }
    });
    loading.value = false
    alert('上传成功')
    window.location.reload()
  }
};

let getStatisticsDevice = async () => {
  let result = (await axios.post(Domain + "/gy/admin/nindex/statisticsDevice", {})).data;
  let onlineTotal = result.data.onlineCount + result.data.offlineCount;
  onlineRate.value = ((result.data.onlineCount / onlineTotal) * 100).toFixed(2);
  offlineRate.value = ((result.data.offlineCount / onlineTotal) * 100).toFixed(2);

  let cameraTotal = result.data.onlineCameraCount + result.data.offlineCameraCount;

  onLineCameraCount = result.data.onlineCameraCount;
  offLineCameraCount = result.data.offlineCameraCount;

  onlineCameraRate = ((result.data.onlineCameraCount / cameraTotal) * 100).toFixed(2);
  offlineCameraRate = ((result.data.offlineCameraCount / cameraTotal) * 100).toFixed(2);

  console.log(result.data);
  var chart1 = echarts.init(option1$.value);
  chart1.setOption({
    tooltip: {
      trigger: "item",
    },
    grid: {
      top: "0%",
      // bottom: '40%'
    },
    legend: {
      orient: "horizontal",
      bottom: 10,
      itemWidth: 10,
      itemHeight: 10,
      formatter: function (name) {
        return name + "：" + (name == "屏幕在线总数" ? result.data.onlineCount : result.data.offlineCount) + "台";
      },
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    series: [
      {
        name: "终端统计展示",
        type: "pie",
        center: ["50%", "35%"],
        radius: ["50%", "60%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false, // 禁用扇区标签
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          position: "right",
        },
        data: [
          {
            value: result.data.onlineCount,
            name: "屏幕在线总数",
            itemStyle: {
              color: "#1198f4",
            },
          },
          {
            value: result.data.offlineCount,
            name: "屏幕离线总数",
            itemStyle: {
              color: "#ffa634",
            },
          },
        ],
      },
    ],
  });

  var chart2 = echarts.init(option2$.value);
  chart2.setOption({
    tooltip: {
      trigger: "item",
    },
    grid: {
      top: "0%",
      // bottom: '40%'
    },
    legend: {
      orient: "horizontal",
      bottom: 10,
      itemWidth: 10,
      itemHeight: 10,
      formatter: function (name) {
        return name + "：" + (name == "监控在线总数" ? onLineCameraCount : offLineCameraCount) + "台";
      },
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    series: [
      {
        name: "终端统计展示",
        type: "pie",
        center: ["50%", "35%"],
        radius: ["50%", "60%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false, // 禁用扇区标签
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          position: "right",
        },
        data: [
          {
            value: onLineCameraCount,
            name: "监控在线总数",
            itemStyle: {
              color: "#1198f4",
            },
          },
          {
            value: offLineCameraCount,
            name: "监控离线总数",
            itemStyle: {
              color: "#ffa634",
            },
          },
        ],
      },
    ],
  });
};

onMounted(() => {
  nextTick(() => {
    getStatisticsDevice();
  });
});
</script>

<style lang="scss" scoped>
.center {
  width: 53%;
  max-width: 1400px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 8.5%;
  height: 91%;
  z-index: 99;
  display: flex;
  pointer-events: none;

  .option {
    width: 49%;
    height: 25%;
    background-size: 100% 100%;
    border: 2px solid rgba(65, 141, 255, 0.15);
    text-align: center;
    margin-bottom: 6%;
    border-radius: 8px;
    background-color: rgba(7, 20, 36, 0.7);
    .title {
      color: #fff;
      padding: 8px 0;
      font-size: 16px;
      margin-top: -1px;
      font-weight: bold;
      font-style: italic;
      letter-spacing: 2px;
      background: url("/images/ctitbg.png") no-repeat;
      background-size: 100% 100%;
      position: relative;

      .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        width: 22px;
        overflow: hidden;
        cursor: pointer;
        pointer-events: auto;
        > img {
          width: 100%;
          cursor: pointer;
        }
        > input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          z-index: 999;
        }
      }
    }

    .body {
      height: 80%;

      .op1 {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .table {
        width: 100%;
        height: 100%;
      }

      .txtcenter {
        position: absolute;
        color: #fff;
        font-size: 12px;
        transform: translateX(-50%) scale(0.8);
        left: 50%;
        top: 26%;
        > div {
          line-height: 1.5;
          opacity: 0.7;

          > span {
            margin-left: 2px;
          }
        }
      }
    }

    .option1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .jiedao {
      > ul {
        color: #fff;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        height: 100%;
        > li {
          display: flex;
          align-items: center;
          margin: 0 10px;
          opacity: 0.5;
          cursor: pointer;
          pointer-events: auto;

          .l-left {
            position: relative;
            font-size: 0;

            > img {
              font-size: 0;
              width: 50px;
            }

            > span {
              font-size: 16px;
              position: absolute;
              font-weight: bold;
              font-style: italic;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }

          .l-right {
            margin-left: 4px;

            > span {
              font-style: italic;
              color: #ccc;
            }

            > div {
              margin-top: 4px;
              font-weight: bold;
              font-size: 22px;
            }
          }
        }

        .active {
          opacity: 1;
        }
      }
    }
  }

  .option2 {
    margin-left: 2%;
  }
}


</style>

<style>
.toast{
  position: fixed;  
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999999;
  color: #fff;
}
</style>
